<template>
  <el-drawer v-model="dialogVisibleRef" :append-to-body="true" :with-header="false" size="350px">
    <el-form :model="form" label-width="auto" ref="ruleFormRef">
      <div style="display: flex;flex-wrap: wrap;margin-top: 20px;">
        <div>
          <el-form-item label="名称：" prop="title" :rules="v.getRules(true, 1, 64)" style="width:300px">
            <el-input v-model="form.title" />
          </el-form-item>
          <el-form-item label="描述：" prop="note" :rules="v.getRules(false, 2, 64)" style="width:300px;">
            <el-input v-model="form.note" />
          </el-form-item>
          <el-form-item label="宽度：" prop="width" style="width:310px;display: flex;">
            <div><el-slider v-model="form.width" :max="300" style="width:90px" /></div>
            <div style="margin-left: 19px;"><el-input-number v-model="form.width" :min="1" :max="300"
                style="width: 110px;" /></div>
          </el-form-item>
          <el-form-item label="高度：" prop="height" tyle="width:310px;display: flex;">
            <div><el-slider v-model="form.height" :max="300" style="width:90px" /></div>
            <div style="margin-left: 19px;"><el-input-number v-model="form.height" :min="1" :max="300"
                style="width: 110px;" /></div>
          </el-form-item>
        </div>
        <el-form-item label="半径：" prop="radius" style="width:300px">
          <el-slider v-model="form.radius" :max="300" />
        </el-form-item>
        <el-form-item label="颜色：" prop="color" style="width:100px;margin-left: 70px;">
          <el-color-picker v-model="form.color" :predefine="predefineColors" />
        </el-form-item>
        <el-form-item label="背景：" prop="bg_color" style="width:100px">
          <el-color-picker v-model="form.bg_color" :predefine="predefineColors" />
        </el-form-item>
      </div>
      <el-form-item label="链接地址：" prop="note" :rules="v.getRules(false, 2, 256)" style="width:300px;">
        <el-input v-model="form.link" />
      </el-form-item>
    </el-form>
    <div style="width: 300px; display: flex; align-items: center;">
      <div style="margin:auto; display: flex; align-items: center;text-align: center;" :style="{
        width: form.width + 'px',
        height: form.height + 'px',
        backgroundColor: form.bg_color,
        color: form.color,
        borderRadius: form.radius + 'px'
      }">
        <div style="text-align: center;margin: auto;">
          <div style="font-size: 1.2em;"> {{ form.title }}</div>
          <div style="font-size: 0.9em;opacity: 0.8;"> {{ form.note }}</div>
        </div>
      </div>
    </div>
    <div style="margin-top: 20px;text-align: center;border-top: 1px solid #cccccc;padding-top: 20px;">
      <el-button size="large" style="width: 150px;" type="primary" @click="submitAndCloseForm">
        提交
      </el-button>
      <el-button size="large" style="margin-left: 50px;" v-if="isEditRef" type="info" @click="submitForm(false)">
        应用
      </el-button>
    </div>
  </el-drawer>
</template>
<script setup lang="ts">
import { reactive, ref, type PropType } from 'vue';
import v from '@/hook/farmFormValids';
import type { FlowNodeData } from './type/FlowNodeData';
const props = defineProps({
  clickHandle: {
    type: Function as PropType<(data: FlowNodeData, isEdit: boolean) => void>,
    required: true
  }
});
const predefineColors = ref([
  '#2d499d',
  '#4fbe87',
  '#eaca4a',
  '#f3616d',
  '#25396f',
])
const form = reactive({
  title: '',
  note: '',
  width: 100,
  height: 100,
  radius: 0,
  color: '#ffffff',
  bg_color: '#435ebe',
  link: ''
});
const ruleFormRef = ref()
const dialogVisibleRef = ref(false);
const isEditRef = ref(false);
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

const submitForm = (isClose: boolean) => {
  ruleFormRef.value.validate((valid: boolean) => {
    if (valid) {
      props.clickHandle(form, isEditRef.value);
      if (isClose) {
        dialogVisibleRef.value = false;
      }
    }
  });
}
const submitAndCloseForm = () => {
  submitForm(true);
}


// 定义一个方法
const openWin = (isOpen: boolean, data?: FlowNodeData, isEdit?: boolean) => {
  dialogVisibleRef.value = isOpen;
  if (data) {
    Object.assign(form, data);
    if (isEdit) {
      isEditRef.value = true;
    } else {
      form.title = '';
      form.note = '';
      form.link = '';
      isEditRef.value = false;
    }
  } else {
    form.title = '';
    form.note = '';
    form.link = '';
    isEditRef.value = false;
  }
};
//>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
// 暴露方法给父组件
defineExpose({
  openWin,
});
</script>
<style scoped>
/* 样式可以根据需要添加 */
</style>
